<template>
  <div class="menus-manage">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/prolist' }">项目列表</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/prolist/proinfo' }">{{proinfo.proNo}}</el-breadcrumb-item>
        <el-breadcrumb-item>文档资料</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <!-- 立项信息 -->
        <div class="card-title">文档资料</div>
        <el-form label-width="100px" :model="files" :rules="filesRules" ref="files">
          <el-row :gutter="24">
            <el-col :span="12">
              <!-- 文件名称 -->
              <el-form-item label="文件名称" prop="fileName">
                <el-input v-model="files.fileName" placeholder="请输入名称或编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
             <!-- 文件类型 -->
              <el-form-item label="文件类型" prop="type">
                <el-select v-model="files.type" filterable style="width:100%">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="选择文件">
            <input type="file" />
          </el-form-item>
          <!-- 备注说明 输入长度限制20-->
          <el-form-item label="备注说明" prop="note">
            <el-input
              type="textarea"
              placeholder="备注说明（20字以内）"
              :rows="3"
              maxlength="20"
              v-model="files.note"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="card-line">
          <!-- 立即修改 -->
          <el-button
            type="primary"
            size="small"
            @click="onEdit"
            v-if="isEdit"
            :disabled="isSubmit"
          >立即修改</el-button>
          <el-button
            type="primary"
            size="small"
            @click="onSubmit"
            v-if="!isEdit"
            :disabled="isSubmit"
          >立即申请</el-button>
          <!-- 返回 -->
          <el-button size="small" style="float:right" @click="goBack">返回</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>

export default {
  // 当前实例数据
  data () {
    return {
      // 是否修改
      isEdit: false,
      // 防止重复提交
      isSubmit: false,
      // 验收报告
      files: {
        // 文件名称
        fileName: '',
        // 文件类型
        type: '',
        // 上传文件路径
        picUrl: '',
        // 备注说明
        note: ''
      },

      options: [{
        value: 0,
        label: '其他'
      }, {
        value: 1,
        label: '客户标书'
      }, {
        value: 2,
        label: '客户需求'
      }, {
        value: 3,
        label: '客户问题'
      }, {
        value: 4,
        label: '客户报价单'
      }, {
        value: 5,
        label: '客户证明材料'
      }, {
        value: 8,
        label: '签到表'
      }, {
        value: 9,
        label: '会议纪要'
      }, {
        value: 10,
        label: '分工和计划'
      }, {
        value: 11,
        label: '周报日报'
      }, {
        value: 12,
        label: '用印文件'
      }, {
        value: 13,
        label: '立项材料'
      }, {
        value: 14,
        label: '证明材料'
      }, {
        value: 15,
        label: '流程附件'
      }, {
        value: 16,
        label: '汇报材料'
      }, {
        value: 17,
        label: '对外申报材料'
      }, {
        value: 18,
        label: '报价单'
      }, {
        value: 19,
        label: '投标技术文档'
      }, {
        value: 20,
        label: '投标商务文档'
      }, {
        value: 21,
        label: '投标交付方案'
      }, {
        value: 22,
        label: '投标法务文档'
      }, {
        value: 23,
        label: '投标文件'
      }, {
        value: 24,
        label: '市场调研分析'
      }, {
        value: 25,
        label: '技术可行性研究报告'
      }, {
        value: 26,
        label: '竞争分析'
      }, {
        value: 27,
        label: '归档文档'
      }],

      // 表单验证规则
      filesRules: {
        fileName: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择文件类型', trigger: 'change' }]
      },
      // 项目基本信息
      proinfo: {}
    };
  },

  // 创建实例后执行
  created () {
    // 获取项目基本信息
    this.getProinfo();
    // 是否修改
    this.editCon();
  },

  methods: {

    // 获取项目信息
    getProinfo () {
      let project = JSON.parse(sessionStorage.getItem('project'));
      this.proinfo = project;
    },

    // 项目文档资料 提交
    onSubmit () {
      // 防止重复提交
      this.isSubmit = true;
      setTimeout(() => {
        this.isSubmit = false;
      }, 1000);

      // 收集请求数据
      let params = {
        proId: this.proinfo.id,
        // 文件名称
        fileName: this.files.fileName,
        // 文件类型
        type: this.files.type,
        // 上传文件路径
        picUrl: '',
        // 备注说明
        note: this.files.note
      };

      this.$nextTick(() => {
        // 判断是否通过验证规则验证
        this.$refs['files'].validate(valid => {
          if (valid) {
            let file = document.querySelector('input[type=file]').files[0];
            if (file) {
              this.file();
            } else {
              this.saveCon(params);
            }
          }
        });
      });
    },

    // 文件上传
    file () {
      let file = document.querySelector('input[type=file]').files[0];
      let formData = new FormData(); // 创建form对象
      formData.append('uploadFile', file);

      this.$http.upload('api/uploadFile', formData).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          let file = {
            proId: this.proinfo.id,
            // 文件名称
            fileName: this.files.fileName,
            // 文件类型
            type: this.files.type,
            // 上传文件路径
            picUrl: datas,
            // 备注说明
            note: this.files.note
          };
          // 执行添加
          this.saveCon(file);
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 保存 - 项目文档资料
    saveCon (params) {
      // 项目文档资料
      this.$http.raw('api/insertProFile', params).then(res => {
        let { code } = res;
        // 判断Code状态
        if (code === 0) {
          this.$message({
            message: '添加成功！',
            type: 'success'
          });
          // 初始化弹窗表单数据
          this.$refs['files'].resetFields();
          this.goBack();
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 修改项目文档资料 - 表单初始值
    editCon () {
      let row = this.$route.query.datas;
      if (row) {
        this.files.id = row.id;
        this.files.fileName = row.fileName;
        this.files.type = row.type;
        this.files.note = row.note;
        this.files.picUrl = row.picUrl;

        // 显示修改按钮
        this.isEdit = true;
      } else {
        return false;
      }
    },

    // 修改 - 项目文档资料
    onEdit () {
      // 防止重复提交
      this.isSubmit = true;
      setTimeout(() => {
        this.isSubmit = false;
      }, 1000);

      // 收集请求数据
      let params = {
        id: this.files.id,
        proId: this.proinfo.id,
        // 文件名称
        fileName: this.files.fileName,
        // 文件类型
        type: this.files.type,
        // 上传文件路径
        picUrl: this.files.picUrl,
        // 备注说明
        note: this.files.note
      };

      this.$nextTick(() => {
        // 判断是否通过验证规则验证
        this.$refs['files'].validate(valid => {
          if (valid) {
            let file = document.querySelector('input[type=file]').files[0];
            if (file) {
              this.updatefile();
            } else {
              this.updateCon(params);
            }
          }
        });
      });
    },

    // 文件上传  修改项目文档资料
    updatefile () {
      let file = document.querySelector('input[type=file]').files[0];
      let formData = new FormData(); // 创建form对象
      formData.append('uploadFile', file);

      this.$http.upload('api/uploadFile', formData).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          let accep = {
            id: this.files.id,
            proId: this.proinfo.id,
            // 文件名称
            fileName: this.files.fileName,
            // 文件类型
            type: this.files.type,
            // 上传文件路径
            picUrl: datas,
            // 备注说明
            note: this.files.note
          };
          this.updateCon(accep);
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 修改项目文档资料
    updateCon (params) {
      // 修改项目文档资料
      this.$http.raw('api/updateProFile', params).then(res => {
        let { code } = res;
        // 判断Code状态
        if (code === 0) {
          this.$message({
            message: '修改成功！',
            type: 'success'
          });
          // 初始化弹窗表单数据
          this.$refs['files'].resetFields();
          this.goBack();
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 返回
    goBack () {
      this.$router.push({
        path: '/home/prolist/proinfo/',
        query: {
          tabs: 'third'
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
